<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
 	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<script src="../../js/mui.min.js"></script>
    		<link href="../../css/mui.min.css" rel="stylesheet"/>
    		<link rel="stylesheet" type="text/css" href="../../css/AddDevice_1.css"/>
		<meta charset="UTF-8">
		<title></title>
		<style>


	.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			
			.title{
			font-size: 15px;
			color: #333333;
			}
			.slide-box{
    		 	
            margin-top: 0px;
            margin-bottom: 0px;
            display: -webkit-box;
            /*overflow-x: scroll;*/
            -webkit-overflow-scrolling:touch;
        		}
        		.slide-item{
            		width: 65px;
            		height: 65px;
            		margin-bottom: 0px;
            		margin-right: 10px;
        		}
			
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div>
				<h1 class="mui-title">新增故障</h1>
			</div>
		</header>
		<div class="flowChart">
		<div class="flowChartImg">
			<div class="selectIMGY">
				<h4>1</h4>
			</div>
			<div class="flowChartLine_1"></div>
			
			<div class="selectIMGY">
				<h4>2</h4>
			</div>
			
			<div class="flowChartLine_1"></div>
			<div class="selectIMGX">
				<h4>3</h4>
			</div>
			
		</div>
		<div class="flowChartText">
			<div>
				<h5 class="flowChartText_2">故障原因</h5>
			</div>
			<div>
				<h5 class="flowChartText_1"></h5>
			</div>
			<div>
				<h5 class="flowChartText_1">信息确认</h5>
			</div>
			<div>
				<h5 class="flowChartText_1"></h5>
			</div>
			<div>
				<h5 class="flowChartText_1">新增成功</h5>
			</div>
		</div>
	</div>
	
	        
		    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		        <li class="mui-table-view-cell">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                		<h5 class="title" style="float: left;">故障等级：</h5>
		                 	<h5 id="faultlever" class="title" style="margin-right: 15px; float: right;">0</h5>
		            		</div>
		            </div>
		        </li>
		        
		        
		        <li class="mui-table-view-cell">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                   <h5 class="title" style="float:left;">负责人：</h5>
		                    		<h5 id="phone" class="title" style="color: #498af7;margin-right: 15px; float: right;">13458287421</h5>
		                    		<h5 id="duty" class="title" style="margin-right: 15px; float: right;">科室主任</h5>
		                    		<h5 id="people" class="title" style="margin-right: 15px; float: right;">孙思邈</h5> 
		                </div>
		            </div>
		        </li>
		        
		        <li class="mui-table-view-cell">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h5 class="title" style="float: left;">故障原因：</h5>
		                    <h5 id="breakTitle" class="mui-ellipsis title" style="float: right; margin-right: 15px;">我也说不清故障原因</h5>
		                    
		                </div>
		            </div>
		        </li>
		        <li class="mui-table-view-cell">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h5 class="title">故障图片：</h5>
							<div id="pics" class="slide-box" style="margin-bottom: 0px;">
       					</div>
		                </div>
		            </div>
		        </li>
		        <li class="mui-table-view-cell">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h5  class="title">故障描述：</h5>
    							<!--<h5 id="breakQuestion" class="mui-ellipsis" style="word-break:break-all;float: left; font-size: 15px; color: ＃666666;">昨夜西风凋碧树，独上西楼，望尽天涯路。欲寄彩笺兼尺素，山长水阔知何处？</h5>-->
		                    <p id="breakQuestion" style="word-break:break-all;float: left; font-size: 15px; color: ＃333333;">昨夜西风凋碧树，独上西楼，望尽天涯路。欲寄彩笺兼尺素，山长水阔知何处？</p>
		                </div>
		            </div>
		        </li>
		    </ul>
		    <button id="submit2" type="button" class="mui-btn mui-btn-royal mui-btn-block" style="background-color: #498AF7;">下一步</button>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.previewimage.js"></script>
	<script src="../../js/mui.zoom.js"></script>
	<script>
		mui.previewImage();
	</script>
			<script type="text/javascript" charset="utf-8">
			
			(function() {
	var index = 1;
	var size = null;
	var imageIndexIdNum = 0;
	var starIndex = 0;
	var feedback = {
		question: document.getElementById('question'), 
		contact: document.getElementById('contact'), 
		imageList: document.getElementById('image-list'),
		submitBtn: document.getElementById('submit2')
	};
	var url = 'http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=addFault';
	feedback.files = [];
	feedback.uploader = null;  
	feedback.deviceInfo = null; 
			var Title1 = null;
			var Question1 = null;
			var Contact1 = null;
			var Faultlever1 = null;
			var Faultpics1 = [];
			var Picsroad1 = [];
				mui.plusReady(function() {
                		var DataLast = plus.webview.currentWebview();
                		Title1 = DataLast.Title;//接收到上个页面传过来的值
                		Question1 = DataLast.Question;
                		Contact1 = DataLast.Contact;
                		Faultlever1 = DataLast.Faultlever;
                		Faultpics1 = DataLast.Faultpics;
                		Picsroad1 = DataLast.PicsRoad;
                		
                		document.getElementById("breakTitle").innerHTML=Title1;
                		document.getElementById("breakQuestion").innerHTML=Question1;
                		document.getElementById("phone").innerHTML=Contact1;
                		document.getElementById("faultlever").innerHTML=Faultlever1;
                		
                		var dd=''
                		for (var i = 0;i < Picsroad1.length;i++) {
                			var pic = Picsroad1[i];
                			dd +=
                			`
                			<div class="slide-item"><a><img style="height: 100%; width: 100%;" src=${pic} data-preview-src="" data-preview-group="1"></a></div>
                			`
                		}
                		
                		document.getElementById("pics").innerHTML=dd;
                		
            		});  
            		
            		
     feedback.submitBtn.addEventListener('tap', function(event) {
		//判断网络连接
		if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
			return mui.toast("连接网络失败，请稍后再试");
		}
		feedback.send(mui.extend({}, feedback.deviceInfo, {
			hospitalid:"10",
			hospitalname:"西京医院",
			departmentid:"11",
			departmentname:"内科",
			equipmentid:"23",
			equipmentname:"B超机",
			userid:"4",
			title:"B超机异常响动",
			content: Question1,
			faultlevel:Faultlever1,
			faulttype:"1",
			faultpics:Faultpics1,
			username:"lee",
//			content: feedback.question.value,
//			contact: feedback.contact.value,
//			images: feedback.files,
//			score:''+starIndex
		}))
		
				
	}, false)


	feedback.send = function(content) {//HTTP传输的函数
		feedback.uploader = plus.uploader.createUpload(url, {
			method: 'POST'
		}, function(upload, status) {
//			plus.nativeUI.closeWaiting()
			console.log("upload cb:"+upload.responseText);
			if(status==200){
				var data = JSON.parse(upload.responseText);
				//上传成功，重置表单
				if (data.state === 'success') {
//					mui.toast('反馈成功~')
					console.log("upload success");
//					feedback.clearForm();
					mui.openWindow({
						url: 'addFault_3.html', 
						id:'submit1',
					});
				}
			}else{
				console.log("upload fail");
			}
			
			
		});
		//添加上传数据
		mui.each(content, function(index, element) {
			if (index !== 'images') {
				console.log("addData:"+index+","+element);
//				console.log(index);
				feedback.uploader.addData(index, element)
			} 
		});
		//添加上传文件
		mui.each(feedback.files, function(index, element) {
			var f = feedback.files[index];
			console.log("addFile:"+JSON.stringify(f));
			feedback.uploader.addFile(f.path, {
				key: f.name
			});
		});
		//开始上传任务
		feedback.uploader.start();

//		mui.alert("感谢反馈，点击确定关闭","问题反馈","确定",function () {
//			feedback.clearForm();
//			mui.back();
//		});
//		plus.nativeUI.showWaiting();

				
	};
	})();
	
           </script>
	</body>
</html>
